<template>
  <div
    class="login animate__animated"
    :class="{ animate__zoomOut: animateOut }"
  >
    <img
      class="charactor"
      :src="$imgCatelog.character[sex ? 'woman' : 'man'][characterIndex]"
      alt="角色图"
    />
    <div v-if="tip" class="tip-red">{{ tip }}</div>
    <div class="form ">
      <div>性别: {{ sexName }}</div>
      <input type="button" value="更改" @click="handleChangeSex()" />
      <div class="occupation">
        <select v-model="characterIndex">
          <option
            :value="item.value"
            :label="item.label"
            v-for="item of occupationTypeList"
            :key="item.value"
          ></option>
        </select>
      </div>
    </div>
    <div class="form ">
      <input
        v-model="userName"
        type="text"
        @input="onChange"
        placeholder="请输入角色名字"
      />
      <input type="button" value="进入" @click="handleEnter()" />
    </div>
  </div>
</template>

<script lang="ts">
import router from "@/router";
import { useStore } from "@/store";
import { PlayerActionTypes } from "@/store/player/action-types";
import { occupationType } from "@/const/character";
import { computed, defineComponent, onMounted, reactive, ref } from "vue";

const store = useStore();

export default defineComponent({
  name: "Login",
  setup() {
    // Datas
    const userName = ref("");
    const sex = ref(0);
    const characterIndex = ref(5);
    const occupationTypeList = reactive(
      Object.entries(occupationType).map(([value, label]) => ({ value, label }))
    );
    const tip = ref("");
    const animateOut = ref(false);

    // Computeds
    const sexName = computed(() => {
      let sexN = "不明";
      switch (sex.value) {
        case 0:
          sexN = "男";
          break;
        case 1:
          sexN = "女";
          break;
        default:
          sexN = "不明";
          break;
      }
      return sexN;
    });

    // Methods
    const handleChangeSex = () => {
      sex.value = 1 - sex.value;
    };
    const handleEnter = () => {
      if (userName.value) {
        animateOut.value = true;
        store.dispatch(PlayerActionTypes.PLAYER_LOGIN_USER, {
          sex: sex.value,
          sexName: sexName.value,
          userName: userName.value,
          characterIndex: characterIndex.value,
          money: 0,
          state: 0
        });
        setTimeout(() => {
          router.push({
            path: "/home"
          });
        }, 1000);
      } else {
        tip.value = "请输入角色名字";
      }
    };
    const onChange = () => {
      if (userName.value) {
        tip.value = "";
      }
    };

    // hooks
    onMounted(() => {
      animateOut.value = false;
    });

    return {
      // data
      tip,
      userName,
      animateOut,
      characterIndex,
      occupationTypeList,
      // computed
      sexName,
      sex,
      // methods
      onChange,
      handleEnter,
      handleChangeSex
    };
  }
});
</script>
<style lang="scss" scoped>
.login {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  .form {
    display: flex;
    justify-content: center;
    align-items: center;
    .occupation {
      margin-left: 20px;
    }
  }
  .charactor {
    animation: upDownDong20Px 5s infinite;
    position: absolute;
    height: 40%;
    top: 5%;
    left: 0;
    right: 0;
    margin: auto;
  }
}
.tip-red {
  font-size: 12px;
  color: red;
}
</style>
